<template>
  <Card :bordered="false">
    <p slot="title">历史构建</p>
    <div style="padding-bottom: 10px;">
      <Row :gutter="16">
        <Col span="4">
          <Cascader :data="selec_env_men"  @on-change=ListNameData trigger="hover"></Cascader>
        </Col>
        <Col span="6">
          <Select v-model="model_name" clearable @on-change="handHistoryList" ref="store">
            <Option v-for="item in nameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
      </Row>
    </div>
    <div>
      <Table :border=false :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="index">
          <span>{{index+1}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          <span style="color:#ed4014" v-if="`${ row.status }`=='false'"><Icon size="15" type="md-rainy" />构建失败</span>
          <span style="color:#19be6b" v-if="`${ row.status }`=='true'"><Icon size="15" type="md-sunny" />构建成功</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="logView(index, 'logs')">查看日志</Button>
        </template>
      </Table>
      <Modal v-model="logModal" draggable scrollable :width="800">
        <p slot="header" style="color:#17233d;text-align:center">
          <span>{{logView_title}}</span>
        </p>
        <div style="padding: 0px 40px 20px;  height:650px; overflow-y: scroll; color:#17233d;">
          <ol reversed style="list-style:none">
            <li v-for="(log,index) in log_data" :key="index">
              {{ log }}
            </li>
          </ol>
        </div>
        <!-- 自定义页脚按键 -->
        <div slot="footer">
          <Button type="dashed" style="margin-right: 5px" @click="logModal=false">关闭</Button>
        </div>
        <!-- 自定义页眉按键 -->
        <div slot="close">
          <a href="#" slot="extra" @click.prevent="logModal=false">
            <Icon type="md-close"> </Icon>
          </a>
        </div>
      </Modal>
      <div style="padding-top: 20px;">
        <p style="color:#ff9900;">提示：历史构建日志仅展示最近10次构建，并且以倒序形式列出。若需查看更多，请联系管理员---小小亚！</p>
      </div>
    </div>
  </Card>
</template>
<script>
import { projectList, historyDeployList, projectHistoryDeploy } from '@/api/deploy'
import { deployConfTypeDetail, deployConfEnvsDetail } from '@/api/deploy'

  export default {
    data () {
      return {
        env: '',
        appType: '',
        model_name: '',
        nameList: [],
        selec_env_men: [],
        data: [],
        logModal: false,
        log_data: [],
        logView_title: '',
        env_names: [],
        language_types: [],
        columns: [
          {
            title: '序号',
            slot: 'index',
            width: '200',
            align: 'center'
          },
          {
            title: '名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '语言类型',
            key: 'application_type',
            align: 'center'
          },
          {
            title: '构建状态',
            key: 'status',
            slot: 'status',
            align: 'center'
          },
          {
            title: '构建日期',
            key: 'create_time',
            align: 'center'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ]
      }
    },
    mounted () {
      this.mens()
    },
    methods: {
    // 应用发布菜单
      mens () {
        // 获取所有环境名称
        var envs = JSON.parse(sessionStorage.getItem('permission')).child.deploy_env;
        deployConfEnvsDetail().then(res => {
          var envs_data = res.data.results
          for (var line in envs) {
            for (var service_type in envs_data) {
              if (envs_data[service_type].name === envs[line]) {
                this.env_names.push({'value':envs_data[service_type].name,'label':envs_data[service_type].label})
              }
            }
          }
          // 获取所有开发语言类
          deployConfTypeDetail().then(res => {
            var types_data = res.data.results
            for (var language_type in types_data) {
              this.language_types.push({'value':types_data[language_type].name,'label':types_data[language_type].name})
            }
            // 生产select格式数据
            for (var env in this.env_names) {
              var params = {
                value: this.env_names[env].value,
                label: this.env_names[env].label,
                children: this.language_types
              }
              this.selec_env_men.push(params)
            }
          })
        })
      },
      // 获取所有项目名称
      ListNameData (data) {
        this.nameList = []  //清空历史数据
        this.$refs.store.clearSingleSelect()  //清空select,配合clearable使用
        this.env = data[0]
        this.appType = data[1]
        projectList(this.env, this.appType).then(res => {
          for(var i in res.data) {
            var params = {}
            params['value'] = res.data[i].name
            params['label'] = res.data[i].name
            this.nameList.push(params)
          }
        })
      },
      //获取构建历史数据
      handHistoryList () {
        historyDeployList(this.env,this.appType,this.model_name).then(res => {
          this.data = res.data
        }).catch(err => {
          this.$Message.error("请求失败!")
        })
      },
      logView (index) {
        var id = this.data[index].id;
        projectHistoryDeploy(id).then(res => {
          this.logModal = true;   //拿到日志再弹出日志展示窗口
          this.log_data = res.data.logs.split('%,')
        }).catch(err => {
          this.$Message.error("日志获取失败!")
        })
      }
    }
  }
</script>